<template>
    <div class="dai">
        <div class="cont">
            <div>
                <el-table :data="tabos" border>
                    <el-table-column label="明细ID" prop="id"></el-table-column>
                    <el-table-column label="盘点ID" prop="transferid"></el-table-column>
                    <el-table-column label="物料ID" prop="materialid"></el-table-column>
                    <el-table-column label="批次号" prop="batchno"></el-table-column>
                    <el-table-column label="系统账面数量" prop="planquantity"></el-table-column>
                    <el-table-column label="盘点实际数量" prop="shippedquantity"></el-table-column>
                    <el-table-column label="差异数量" prop="receivedquantity"></el-table-column>
                    <el-table-column label="差异原因" prop="chayiyuanyi"></el-table-column>
                    <el-table-column label="盘点人" prop="pandianr"></el-table-column>
                    <el-table-column label="盘点时间" prop="createtime"></el-table-column>
                    <el-table-column label="状态" prop="zhantai"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, defineProps, defineEmits } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';

const props = defineProps({
    transferId: {
        type: String,
        default: ''
    }
});


const emit = defineEmits(['closeDialog']);

const insertVisible = ref(false);

const filters = ref({
    id: '',
    transferid: '',
    batchno: ''
});
const warehoseList = ref([]);

const loadwarehouses = () => {
    request({
        method: "get",
        url: "/inventory_sa/trees",
        params: {
            transferId: filters.value.transferid || undefined
        }
    }).then(res => {
        console.log('明细表接口返回数据:', res.data);
        if (res.data?.data) {
            warehoseList.value = res.data.data.map(item => ({
                id: item.detailId,
                transferid: item.countId,
                materialid: item.materialId,
                batchno: item.batchNo,
                planquantity: item.systemQuantity,
                shippedquantity: item.countedQuantity,
                receivedquantity: item.varianceQuantity,
                chayiyuanyi: item.varianceReason,
                pandianr: item.countedBy,
                createtime: new Date(item.countTime).toLocaleDateString(),
                zhantai: item.status
            }));
        } else {
            warehoseList.value = [];
            ElMessage.error("查询失败:" + (res?.message || '无明细数据'));
        }
    }).catch(err => {
        warehoseList.value = [];
        ElMessage.error("加载失败:" + (err.message || '网络异常'));
    });
};
watch(
    () => props.transferId,
    (newVal, oldVal) => {
        console.log('子组件接收的盘点ID:', newVal);
        if (newVal && newVal !== oldVal) {
            filters.value.transferid = newVal;
            loadwarehouses();
        }
    },
    { immediate: true }
);
onMounted(loadwarehouses);


const tabos = computed(() => {
    return warehoseList.value.filter(item => {
        const matchId = filters.value.id ? item.id.toString().includes(filters.value.id) : true;
        const matchTransferId = filters.value.transferid
            ? item.transferid === filters.value.transferid
            : true;
        const matchBatchNo = filters.value.batchno ? item.batchno.includes(filters.value.batchno) : true;
        return matchId && matchTransferId && matchBatchNo;
    });
});

const resfrom = () => {
    filters.value = { id: "", transferid: "", batchno: "" };
    loadwarehouses();
};

const closeDialog = () => {
    emit('closeDialog');
};
</script>

<style scoped>
.nmb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}

.nmbs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    gap: 10px
}
</style>